<template>
  <!-- IntendedDetails 意向详情 -->
  <PageContainer>
    <view class="container">
      <Header title="意向详情" />
      <view class="data-list">
        <template v-for="(item, i) in dataList" :key="i">
          <view class="data_box" @click="toList(item.appUserId, item.type)">
            <view class="data_title">{{ item.name }}</view>
            <view class="right">
              <text>{{ item.count }}</text>
              <text class="ali-icon">&#xe6c7;</text>
            </view>
          </view>
        </template>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  IntendedDetails  意向详情 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { potentialClientRecordList } from '@/api/admin';
  import { PotentialClientRecordListResult } from '@/api/admin/types';
  import Header from '@/components/Header/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import { ref } from 'vue';
  import { PotentialClientsTypeEnum } from '@/enums/commercializeEnum';

  const dataList = ref<PotentialClientRecordListResult[]>([]);

  onLoad<'IntendedDetails'>((op) => {
    potentialClientRecordList(op.appUserId).then((r) => (dataList.value = r));
  });

  const toList = (appUserId: number, type: PotentialClientsTypeEnum) =>
    navigateTo({
      name: 'accessRecord',
      options: {
        appUserId,
        type,
      },
    });
</script>

<style lang="scss" scoped>
  .data-list {
    background-color: #fff;
    border-radius: 10rpx;
    .data_box {
      height: 98rpx;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      margin: 0 30rpx;
      border-bottom: 1px solid #ddd;
      color: #333;
      font-size: 27rpx;
      &:nth-last-child(1) {
        border-bottom: none;
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #2878ff;
        .ali-icon {
          font-size: 40rpx;
          color: #aaabab;
          margin-left: 20rpx;
        }
      }
    }
  }
</style>
